<template>
  <div class="myKnowledge">
    <div v-if="currentPageName == 'filePage'" class="filePage">
      <crumb :list="crumbList" @goBack="goBack" @gotoPage="gotoPage" :right="true"></crumb>
      <div class="navbae">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :name="item" v-for="item in barList" :key="item">
            <div class="tabsPanLabel" slot="label">{{ item }}</div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <conditionalQuery @search="search" :state="true"></conditionalQuery>
      <div class="fileTable">
        <div class="fristRow">
          <div class="title">文件列表</div>
          <div class="btnGroup">
            <el-button size="medium" @click="dialogVisible = true"> <i class="iconfont icon-shangchuan" />上传 </el-button>
            <el-button size="medium" @click="downLoadFile"> <i class="iconfont icon-yunduanxiazai" />批量下载 </el-button>
            <el-button size="medium" @click="deleteFile"> <i class="el-icon-delete" style="margin-right: 5px" />批量删除 </el-button>
            <el-button @click="batchQuestioning" size="medium"> <i class="iconfont icon-sanfangxieyi1" />批量提问 </el-button>
            <el-button size="medium" disabled> <i class="iconfont icon-yonghuxieyi-xianxing" />批量解析 </el-button>
          </div>
        </div>
        <div style="height: calc(100% - 100px)">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="100%" :stripe="true" class="costomTable">
            <el-table-column type="selection" width="55" align="center"> </el-table-column>
            <el-table-column type="index" label="序号" align="center" width="60"> </el-table-column>
            <el-table-column width="450" prop="fileName" label="文件名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="filerName" @click="$emit('changeKnowledge', scope.row)">
                  <img style="margin-right: 5px" :src="image[scope.row.fileType]" alt="" />
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="esc" label="简介" show-overflow-tooltip /> -->
            <el-table-column prop="uploadStatus" label="文件上传状态" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <div>{{ uploadStatusOPtion[scope.row.uploadStatus] }}</div>
                <!-- <div  v-if="scope.row.in_folder"  style="color: #f56c6c">×</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="analysisStatus" label="文件解析状态" align="center">
              <template slot-scope="scope">
                <div>{{ analysisStatusOption[scope.row.analysisStatus] }}</div>
                <!-- <div class="analysisProgress">
                  <span>解析中</span>
                  <span>当前进度99%</span>
                </div>
                <el-progress :percentage="99" :text-inside="true" :format="() => ''"></el-progress> -->
              </template>
            </el-table-column>

            <el-table-column prop="gmtCreated" label="创建时间" show-overflow-tooltip />
            <el-table-column prop="gmtCreated" label="创建人" show-overflow-tooltip>{{ userName }}</el-table-column
            >/>
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="operateGroup">
                  <!-- <div @click="operate(scope.row)"><i class="iconfont icon-yonghuxieyi-xianxing"></i>解析</div> -->
                  <div @click="modify(scope.row)"><i class="iconfont icon-bianji" />详情</div>
                  <div @click="deleteFile(scope.row)"><i class="el-icon-delete" style="margin-right: 5px" />删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pageInation :total="total" @handleCurrentChange="handleCurrentChange"></pageInation>
        </div>
      </div>
      <!-- </div> -->
    </div>
    <!-- 知识库 -->
    <knowledgeList @changeKnowledge="changeKnowledge" v-else-if="currentPageName == 'knowledgeList'"></knowledgeList>
    <!-- 文件详情 -->
    <filedDetails
      :crumbList="crumbList"
      v-else-if="currentPageName == 'filedDetails'"
      :filedInfo="filedInfo"
      @goBack="goBack"
      @gotoPage="gotoPage"></filedDetails>
    <!-- 文件上传 -->
    <parentDialog title="文件上传" :visible.sync="dialogVisible" v-if="dialogVisible">
      <upload :userknowId="userknowId" :userknowledge="userknowledge" @uploadFun="getTableList" @func="cancel"></upload>
    </parentDialog>
  </div>
</template>

<script>
import conditionalQuery from "@/components/conditionalQuery/index.vue"; // 查询参数
import pageInation from "@/components/pageInation/index.vue"; // 分页
import parentDialog from "@/components/dialog/parentDialog.vue"; // 弹窗
import upload from "@/components/dialog/upload.vue"; // 文件上传
import filedDetails from "@/components/dialog/filedDetails.vue"; // 文件详情
import knowledgeList from "./knowledgeList.vue"; // 知识库
import { mixins } from "@/components/mixin/konwledge";
import crumb from "@/components/pageInation/crumb.vue";

import { knowledgeListBases, createKnowledge, listFilesJava, deleteDocs, deleteDocsJava, updateDocsJava } from "@/api/KnowledgeBaseManagement";
import { downLoad, delay } from "@/utils/index";

export default {
  components: {
    conditionalQuery,
    pageInation,
    parentDialog,
    upload,
    filedDetails,
    knowledgeList,
    crumb,
  },
  mixins: [mixins],
  data() {
    return {
      analysisStatusOption: {
        0: "解析成功",
        1: "解析中",
        2: "解析失败",
      },
      uploadStatusOPtion: {
        0: "上传成功",
        1: "上传中",
        2: "上传失败",
      },
      barList: ["全部", "Word文档", "PDF文档", "文本文件"],
      activeName: "全部",
      tableData: [], // 表格显示数据
      currentPage: 1,
      pageSize: 10,
      total: 0,
      userknowledge: "", // 当前文件库
      userknowId: "", // 当前文件库id
      userName: "",
      params: {
        //筛选条件
        fileName: "",
        screening: "",
        fileState: "",
      },
      dialogVisible: false,
      filedDetails: false,
      currentPageName: "knowledgeList", // 页面显示控制
      filedInfo: null,
    };
  },
  computed: {
    crumbList() {
      if (this.currentPageName == "filedDetails") {
        return ["知识库服务 ", "我的知识库", this.userknowledge, this.filedInfo.fileName];
      } else {
        return ["知识库服务 ", "我的知识库", this.userknowledge];
      }
    },
  },
  mounted() {},
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    changeKnowledge(row) {
      this.currentPageName = "filePage";
      this.userknowId = row.id;
      this.userknowledge = row.libName;
      this.getTableList();
    },
    // deleteFile(row) {
    //   let fileNameList = [],
    //     fileIdList = [];
    //   if (row["id"]) {
    //     fileNameList = [row.fileName];
    //     fileIdList = [row.id];
    //   } else {
    //     let selection = this.$refs.multipleTable.selection;
    //     if (selection.length) {
    //       fileNameList = selection.map((v) => v.fileName);
    //       fileIdList = selection.map((v) => v.id);
    //     }
    //   }
    //   if (!fileIdList.length) {
    //     this.$message.warning("请先选择文件");
    //     return;
    //   }
    //   this.$confirm("确定删除文件?", "提示", {
    //     cancelButtonText: "取消",
    //     confirmButtonText: "确定",
    //     type: "warning",
    //   }).then(() => {
    //     deleteDocsJava({ ids: fileIdList })
    //       .then((result) => {
    //         if (result.code == "200") {
    //           this.$message.success(result.msg);
    //           this.getTableList();
    //         }
    //       })
    //       .catch((err) => {
    //         console.log(err);
    //       });
    //   });
    // },
    // 下载
    async downLoadFile(row) {
      console.log(this.$refs.multipleTable.selection);
      let selection = this.$refs.multipleTable.selection || [];
      for (let i = 0; i < selection.length; i++) {
        await delay(50);
        const item = selection[i];
        downLoad(item.fileName, item.url);
      }
    },
    // 获取文件列表
    getTableList() {
      this.dialogVisible = false;
      this.userName = localStorage.getItem("userName");
      let obj = {
        全部: "",
        PDF文档: "pdf",
        Word文档: "docx",
        // PPT文档: 'ppt',
        // Excel表格: 'xlsx',
        文本文件: "txt",
      };
      console.log(this.userknowId);
      listFilesJava({
        page: this.currentPage,
        size: this.pageSize,
        libraryId: this.userknowId,
        fileName: this.params.fileName,
        analysisStatus: this.params.screening,
        uploadStatus: this.params.fileState,
        extendName: obj[this.activeName],
      })
        .then(result => {
          console.log(result);
          if (result.code == 200) {
            let tabList = [];
            this.total = result.data?.total;
            this.tableData = (result.data.records || []).map((item, index) => {
              let fileType = item.fileName.split(".").at(-1);
              tabList.push(obj[fileType] || "其他文件");
              return {
                ...item,
                num: index + 1,
                esc: "简介",
                adm: "水利部",
                fileType,
                bar: obj[fileType] || "其他文件",
              };
            });

            // if (!tabList.length) return;

            // if (!this.activeName || this.activeName == 0) {
            //   this.activeName = tabList[0];
            // }
            // this.barList = new Set(tabList);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查询事件
    search(obj) {
      let { fileName, screening, fileState } = obj;
      this.currentPage = 1;
      this.params.fileName = fileName;
      this.params.screening = screening;
      this.params.fileState = fileState;

      this.getTableList();
    },
    // 分页事件
    handleCurrentChange(item) {
      this.currentPage = item.currentPage;
      this.pageSize = item.pageSize;
      this.getTableList();
    },
    handleClick(tab, event) {
      this.currentPage = 1;
      this.activeName = tab.name;
      this.getTableList();
    },
    modify(row) {
      this.currentPageName = "filedDetails";
      this.filedInfo = row;
    },
    goBack() {
      if (this.currentPageName == "filePage") {
        this.currentPageName = "knowledgeList";
      } else if (this.currentPageName == "filedDetails") {
        this.currentPageName = "filePage";
      }
    },
    gotoPage(item) {
      if (item == "我的知识库") {
        this.currentPageName = "knowledgeList";
      } else {
        this.currentPageName = "filePage";
      }
    },
    operate(row) {},
  },
};
</script>
<style lang="scss" scoped>
.myKnowledge {
  width: 100%;
  height: calc(100%);
  background: #e6eaf0;
  position: relative;
  .filePage {
    width: 100%;
    height: calc(100%);
    .navbae {
      width: 100%;
      margin: 5px 0px;
      ::v-deep .el-tabs {
        .el-tabs__active-bar.is-top {
          top: 0px;
          height: 1px;
          border-top: 2px solid #035bec;
          border-radius: 5px 5px 0px 0px;
        }
        .el-tabs__item {
          box-shadow: none !important;
        }
        .el-tabs__nav-scroll {
          padding-bottom: 10px;
        }
        .tabsPanLabel {
          min-width: 80px;
          padding: 0px 10px;
          line-height: 50px;
        }
        .el-tabs__header.is-top {
          background: #fff;
          border-radius: 8px;
        }
        .el-tabs__nav-wrap::after {
          display: none;
        }
        .el-tabs__item {
          padding: 0px;
        }
        .el-tabs__item:hover {
          color: #035bec;
        }
        .el-tabs__item.is-active {
          .tabsPanLabel {
            color: #035bec;
            font-weight: 600;
            background: rgba(3, 91, 236, 0.1);
          }
        }
      }
    }
    .fileTable {
      background: #fff;
      margin-top: 20px;
      padding: 20px;
      border-radius: 8px;
      height: calc(100% - 207px);
      box-sizing: border-box;
      .filerName {
        display: flex;
        align-items: center;
        > img {
          margin-right: 5px;
        }
      }
      .fristRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(0, 20, 45, 0.05);
        .title {
          font-family: MiSans, MiSans;
          font-weight: 600;
          color: #00142d;
          line-height: 24px;
        }
      }
      .analysisProgress {
        // margin-right: 15px;
        &:nth-child(1) {
          display: flex;
          justify-content: space-between;
        }
        :nth-child(2) {
          color: rgba(0, 20, 45, 0.5);
        }
      }
      .operateGroup {
        display: flex;
        .iconfont {
          margin-right: 3px;
        }
        > div {
          margin-right: 15px;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
}
</style>
